<template>
	<view>
		<u-navbar
		placeholder	  
		:autoBack="true"
	    >
		<view slot="right">
			<button style="background-color: limegreen; color: white;font-size: 26rpx;height: 50rpx; line-height: 50rpx;" @click="upload">发表</button>
			<u-toast ref="uToast"></u-toast>
		</view>
		</u-navbar>
		<!-- 文本域 -->
		<view style="margin-left: 3%;width: 90%;">
			<uni-easyinput :inputBorder="false" maxlength="-1" :autoHeight="true" type="textarea" v-model="dynamic.content" placeholder="这一刻的想法"></uni-easyinput>
		</view>
		
		<view style="display: flex; flex-wrap: wrap; margin-left: 3%;">
			<!-- 显示图片或者视频 -->
			<view v-for="(file,index) in FileList" :key="index" style="height: 240rpx;width: 30%; margin-left: 1%; margin-top: 1%; ">
				<image v-if="isShow(file)" style="width: 100%;height: 240rpx;" :src="file.path"></image>
				<video v-if="!isShow(file)" style="margin-right: 2%; width: 100%;height: 240rpx;" :src="file.path"></video>
			</view>
			<view  v-if="FileList.length != 9" @click="getFile()" style="background-color: #f3f3f3;height: 240rpx;width: 30%; margin-left: 1%;margin-top: 1%;">
				<u-icon name="photo" size="40" top="60rpx" label-pos="bottom"></u-icon>
			</view>
			
		</view>
		
	</view>
</template>

<script>
import upload from '../../../../uni_modules/uview-ui/libs/config/props/upload'
	export default {
		data() {
			return {
				dynamic:{
					id:null,
					userId:null,
					content:'',
					fileList:[],
				},
				FileList:[],
				toastList:[
					{
						type:'loading',
						title:'正在加载',
						message:'发布中',
						duration:'200000',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
					},
					{
						type:'success',
						title:'成功主题(带图标)',
						message:'发布成功',
						url: '/pages/user/dynamic/colleagues',
						duration:'2000',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
					}
				],
			}
		},
		methods: {
			getFile(){
				let _this = this
				uni.chooseImage({
					count:9,
					success(res) {
						let file = {path:'',name:'',type:''}
						file.path = res.tempFiles[0].path
						file.name = res.tempFiles[0].name
						file.type = res.tempFiles[0].type
						_this.FileList.push(file)
						
					},
				})
			},
			isShow(file){
				if(file.type!='video/mp4'){
					return true
				}else{
					return false
				}
			},
			upload(){
				let _this = this
				let count = 0;
				 for(let i=0;i<this.FileList.length;i++){
					 this.showToast(this.toastList[0])
					 uni.uploadFile({
						url:'http://localhost:8090/nailCampus/fileUpload',
						filePath:this.FileList[i].path,
						name:'file',
						success(res) {
							_this.showToast(_this.toastList[0])
							console.log(count++)
							_this.dynamic.fileList.push(JSON.parse(res.data).data)
							if(count===_this.FileList.length){
								_this.publish()
							}
						}
					})
				}
			},
			publish(){
				this.dynamic.fileList = JSON.stringify(this.dynamic.fileList)
				uni.request({
					url:'http://localhost:8090/nailCampus/dynamic/publish',
					method:'POST',
					data:this.dynamic,
					success:res=>{ 
						this.showToast(this.toastList[1])
					}
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
						url: params.url
						})
					}
				})
			},
		},
		onLoad() {
			let fileList = uni.getStorageSync('fileList')
			this.FileList = fileList
			this.dynamic.userId = uni.getStorageSync('user').id
		}
	}
</script>

<style>

</style>
